<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>系统配置</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="/css/pub.css">
    <link rel="stylesheet" href="/css/jquery-confirm.min.css">
    <link rel="stylesheet" href="/css/font-awesome-all.min.css">
    <style>
        .container{
            max-width: 1280px;
        }
        .config-card {
            max-width: 800px;
            margin: 20px auto;
        }
        .config-card h4{
            text-align: center;
        }

        .config-value {
            font-weight: normal;
        }
        
        .row{
            flex-direction: column;
        }
        .row .col-md-6{
            width: 100%;
        }
        .row .mb-3{
            display: flex;
        }

        .row .mb-3 .form-label{
            width: 120px;
            color: #a59e9e;
        }
        .row .mb-3 .config-value{
            flex: 1;
            word-break: break-all;
        }
    </style>


    </style>
</head>

<body>
    <div class="container">
        <div class="card config-card">
            <div class="card-header bg-primary text-white">
                <h4>系统配置</h4>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-end mb-3">
                    <button class="btn btn-primary" onclick="refresh()">
                        <i class="fa fa-solid fa-rotate"></i> 刷新
                    </button>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">环境</label>
                            <div class="config-value" id="env"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Artemis主机</label>
                            <div class="config-value" id="artemisHost"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Artemis用户名</label>
                            <div class="config-value" id="artemisUserName"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">MQTT QoS</label>
                            <div class="config-value" id="mqttQos"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">数据库URL</label>
                            <div class="config-value" id="dbUrl"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">数据库用户名</label>
                            <div class="config-value" id="dbUserName"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Flink地址</label>
                            <div class="config-value" id="flinkAddress"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">上传目录</label>
                            <div class="config-value" id="uploadDirectory"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/js/jquery-3.7.1.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script src="/js/jquery-confirm.min.js"></script>
    <script src="/js/pub.js"></script>
    <script src="/js/sys.js"></script>
    <script src="/js/font-awesome-all.min.js" data-auto-replace-svg="nest"></script>
    <script>
        $(document).ready(function () {
            refresh();
        });

        async function refresh() {
            await getAppInfo().then(
                resp => {
                    if (resp.flag == 1) {
                        let config = resp.data;
                        $('#env').text(config.env);
                        $('#artemisHost').text(config.artemisHost);
                        $('#artemisUserName').text(config.artemisUserName);
                        $('#mqttQos').text(config.mqttQos);
                        $('#dbUrl').text(config.dbUrl);
                        $('#dbUserName').text(config.dbUserName);
                        $('#flinkAddress').text(config.flinkAddress);
                        $('#uploadDirectory').text(config.uploadDirectory);
                    }
                    else {
                        //把所有组件重置为没有数据
                        showMessage("提示", "获取信息失败", "error");
                        let inputs = $(".config-value");
                        for (let i = 0; i < inputs.length; i++) {
                            $(inputs[i]).text("");
                        }
                        // $('#env').text("");
                        // $('#artemisHost').text("");
                        // $('#artemisUserName').text("");
                        // $('#mqttQos').text("");
                        // $('#dbUrl').text("");
                        // $('#dbUserName').text("");
                        // $('#flinkAddress').text("");
                        // $('#uploadDirectory').text("");
                    }
                }
            );
        }
    </script>
</body>

</html>